@import '../../../scss/mixin';
@import '../../../scss/variable';

.detail {
    @include wh(100%, 100%);
    @include flex(column);
    background: #f7f7f8;

    .content {
        flex: 1;
        width: 100%;
        overflow: auto;

        img {
            width: 100%;
        }

        ;

        .related {
            padding: 0 20px;

            .relatedItem {
                background: #fff;
                margin-top: 20px;
                padding: 20px 20px 0 20px;

                &:nth-child(1) {
                    margin: 0;
                }

                dt img {
                    @include wh(100%, 400px);
                }

                dd {
                    line-height: 100px;
                    @include ellipsis();
                    @include wh(100%, 100px);
                }
            }
        }

        .word {
            background: #fff;
            margin-top: 20px;
            padding: 0 20px;

            .title {
                @include wh(100%, 100px);
                @include flex(row, center, center);
                @include border1px(bottom);

                div {
                    &:nth-child(1) {
                        flex: 9;
                        color: #000;
                    }

                    &:nth-child(2) {
                        flex: 1;
                        text-align: center;
                        i {
                            font-size: .4rem;
                            color: #000;
                        }
                    }
                }
            }

            .wordContent {
                padding: 20px 0;

                .leaveItem {
                    border-bottom: 3px solid #ddd;

                    p {
                        line-height: 60px;

                        &:nth-child(1) {
                            overflow: hidden;
                            font-size: $base-size-m;

                            span {
                                &:nth-child(1) {
                                    float: left;
                                    color: #000;
                                }

                                &:nth-child(2) {
                                    float: right;
                                }
                            }
                        }
                    }
                }
            }

            .look {
                @include wh(100%, 80px);
                @include middle(80px);
                color: #000;
            }
        }
    }
}